<template>
    <div id="local_container">
        <div id="main">
            <div id="main1"></div>
            <el-row id="btn">
                <el-button type="primary" plain ref="liu" @click="liugan">流感</el-button>
                <el-button type="warning" plain ref="shou" @click="shouzukoubing">手足口病</el-button>
                <el-button type="danger" plain ref="xing" @click="xinghongre">猩红热</el-button>
            </el-row>
        </div>
        <div id="main2"></div>
        <div id="main3">
        </div>
    </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts';
import bus from '@/bus/bus';
import axios from 'axios'
export default ({
    name: 'LocalHistory',
    data() {
        return {
            selectedPro: '北京市',
            illdata: [],
            showdata: null,
            airdata:[],
            airlevel:[[{
                value:2,
                name:'优'
            },
            {
                value:77,
                name:'良'
            },
            {
                value:40,
                name:'轻度污染'
            },
            {
                value:5,
                name:'中度污染'
            },
            {
                value:0,
                name:'重度污染'
            }],
            [{
                value:0,
                name:'优'
            },
            {
                value:51,
                name:'良'
            },
            {
                value:55,
                name:'轻度污染'
            },
            {
                value:9,
                name:'中度污染'
            },
            {
                value:9,
                name:'重度污染'
            }],
            [{
                value:0,
                name:'优'
            },
            {
                value:77,
                name:'良'
            },
            {
                value:44,
                name:'轻度污染'
            },
            {
                value:3,
                name:'中度污染'
            },
            {
                value:0,
                name:'重度污染'
            }]]
        }
    },
    methods: {
        //患病人数图
        async updateChart(num = 0) {
            var url = '/患病人数/' + this.selectedPro + '.json'
            var liuData = []
            var shouData = []
            var xingData = []
            try{
                await axios.get(url).then(res => {
                    res.data.forEach(item => {
                        liuData.push(item.liu);  
                        shouData.push(item.shou);  
                        xingData.push(item.xing);  
                    })

                })
                this.illdata = [liuData,shouData,xingData]
            }catch(error){
                console.error('读取 JSON 文件时发生错误:', error)
            }
            let option1 = {
                backgroundColor: "transparent",
                title: {
                            text: '省份历年患病人数',
                            x: 'center',
                            textStyle: {
                                fontSize: 20,
                                color: 'black'
                            },
                            top: '6%'

                        },
                grid: {
                    left: '12%',
                    top: '8%',
                    bottom: '12%',
                    right: '8%'
                },
                xAxis: {
                    data: [
                        2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],//x轴
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 129, 109, 0.1)',
                            width: 1 //这里是为了突出显示加上的
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#999',
                            fontSize: 8
                        }
                    }
                },
                yAxis: [{
                    name:"省份患病人数",
                    splitNumber: 2,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 129, 109, 0.1)',
                            width: 1 //这里是为了突出显示加上的
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: 'rgba(255,255,255,.5)'
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(255, 129, 109, 0.1)',
                            width: 0.5,
                            type: 'dashed'
                        }
                    }

                }
                ],
                series: [{
                    name: 'hill',
                    type: 'pictorialBar',
                    barCategoryGap: '0%',
                    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                    label: {
                        show: true,
                        position: 'top',
                        distance: 12,
                        color: '#DB5E6A',
                        fontWeight: 'bolder',
                        fontSize: 8,
                    },
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(232, 94, 106, .8)' //  0%  处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(232, 94, 106, .1)' //  100%  处的颜色
                                }
                                ],
                                global: false //  缺省为  false
                            }
                        },
                        emphasis: {
                            opacity: 1
                        }
                    },
                    data: this.illdata[num],//y轴
                    z: 10
                }]
            };
            this.myChart1.setOption(option1);
        },
        liugan() {
            this.updateChart(0);
        },
        shouzukoubing() {
            this.updateChart(1);
        },
        xinghongre() {
            this.updateChart(2);
        },
        //空气质量图
        async air() {
            var url = '/空气质量/' + this.selectedPro + '.json'
            var months = []
            var aqis = []
            try{
                await axios.get(url).then(res => {
                    res.data.forEach(item => {  
                        // 将月份和 AQI 添加到对应的数组中  
                        months.push(item.月份);  
                        aqis.push(item.AQI);  
                    })
                })
                this.airdata = [months,aqis]
            }catch(error){
                console.error('读取 JSON 文件时发生错误:', error)
            }
            let option2 = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                },
                title: {
                            text: '当地历年空气质量系数',
                            x: 'center',
                            textStyle: {
                                fontSize: 20,
                                color: 'black'
                            },
                            
                            top: '5%'

                        },
                legend: {
                    align: 'left',
                    right: '30px',
                    type: 'plain',
                    top:'10px',
                    textStyle: {
                        color: '#7ec7ff',
                        fontSize: 12,
                    },
                    itemGap: 25,
                    itemWidth: 18,
                },
                grid: {
                    top: '50px',
                    left: '80px',
                    right: '40px',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#233653',
                            },
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#7ec7ff',
                                padding: 10,
                                fontSize: 12,
                            },
                            formatter: function (data) {
                                return data;
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#192a44',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: this.airdata[0],
                    },
                ],
                yAxis: [
                    {
                        name: '空气质量',
                        nameTextStyle: {
                            color: '#7ec7ff',
                            fontSize: 12,
                            padding: 10,
                        },
                        min: 0,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#192a44',
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#233653',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#7ec7ff',
                                padding: 10,
                            },
                            formatter: function (value) {
                                if (value === 0) {
                                    return value;
                                }
                                return value;
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: 'AQI指数',
                        type: 'line',
                        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: 'rgba(84,131,255,1)', // 线条颜色
                            },
                            borderColor: 'rgba(0,0,0,.4)',
                        },
                        itemStyle: {
                            color: 'rgba(84,131,255,1)',
                        },
                        tooltip: {
                            show: true,
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(84,131,255,.3)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(84,131,255, 0)',
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            },
                        },
                        data: this.airdata[1],
                    }
                ],
            };
            this.myChart2.setOption(option2);
        },
        //空气质量等级图
        async level(pro = '北京市') {
            var num = 0
            switch(pro){
                case '北京市':
                    num = 0;
                    break;
                case '河北省':
                    num  = 1;
                    break;
                case '天津市':
                    num = 2;
                    break;
            }
            let option3 = {
                title: {
                            text: '当地空气等级月份数统计',
                            x: 'center',
                            textStyle: {
                                fontSize: 20,
                                color: 'black'
                            },
                            top:"5%"

                        },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:['#8fc31f','#f35833','#00ccff','#ffcc00'],
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: ['优','良','轻度污染','中度污染','重度污染'],
                },
                grid: {
                    left: '12%',
                    top: '30%',
                    bottom: '0%',
                    right: '8%'
                },
                series : [
                    {
                        name: '空气质量等级',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '55%'],
                        data:this.airlevel[num],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                label:{ 
                                    show: true, 
                                    formatter: '{b} : {c} ({d}%)' 
                                }
                            },
                            labelLine :{show:true}
                        }
                    }
                ]
            };
            this.myChart3.setOption(option3);
        },
    },
    created() {
        bus.$on('data-received', val => {
            this.selectedPro = val
        })
    },
    beforeDestroy() {
        bus.$off('data-received');
    },
    mounted() {
        //当地历年患病人数统计
        this.myChart1 = echarts.init(document.getElementById('main1'));
        this.updateChart();
        this.liugan()

        //当地空气质量指数
        this.myChart2 = echarts.init(document.getElementById('main2'));
        this.air()

        //当地空气质量等级
        this.myChart3 = echarts.init(document.getElementById('main3'));
        this.level()
    },
    watch: {
        selectedPro(newValue) {
            this.updateChart()
            this.air()
            this.level(newValue)
        }
    }
})
</script>
<style>
#local_container {
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 1500px;
    height: 350px;
    margin-left: 70px;
    margin-right: 210px;
}

#main1 {
    width: 500px;
    height: 310px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#main2 {
    width: 500px;
    height: 350px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#main3{
    width: 500px;
    height: 350px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
</style>